import React, { useEffect, useState } from 'react'

import PubSub from 'pubsub-js'
import Item from './Item'

export default function List() {

  const [{init, search, data}, setSearchList] = useState({data: []})

  // 订阅（数据由兄弟组件 Header 通过 PubSub 传递）
  useEffect(() => {
    const githubPSToken = PubSub.subscribe('github', (_, data) => {
      setSearchList(data)
    })
    return () => {
      // 取消订阅
      PubSub.unsubscribe(githubPSToken)
    }
  }, [])

  return (
    <div className="row">
      {
        init ? <h2>请开始搜索！！！</h2> : 
          search ? <h2>搜索中......</h2> : 
            data.map(item => {
              return <Item key={item.id} {...item} />
            })
      }
    </div>
  )
}
